<template>
	<div id="menu">
		<header>
			<div class="logo">
				<img src="../assets/logo.png" alt="" />
			</div>
			<div class="menuList">
				<li :class="{'active':isActive(route)}" v-for="route in $router.options.routes" v-if="route.menu">
					<router-link :to="{ path: route.path}">
						<div><span class="iconfont" v-html="route.menuIcon"></span></div>
						<div>{{route.name}}</div>
					</router-link>
				</li>
			</div>
			<div class="rightMess">
				<div>
					<span class="role">超级管理员</span>
					<span class="line">|</span>
					<span class="logout" @click="logout">退出</span>
				</div>
				<div><span class="company">奥凯航空公司</span></div>
			</div>
		</header>
		<div class="childMenu">
			<ul>
				<li v-for="child in children" :class="{'active':isChildActive(child)}">
					<router-link :to="{ path: child.path}">
						<p class="childName">{{child.name}}</p>
					</router-link>
				</li>
			</ul>
			<div class="help">帮助</div>
		</div>
		<div id="content">
			<div class="view">
				<router-view/>
			</div>
			<Foot/>
		</div>
	</div>
</template>

<script>
	import Foot from '@/components/footer.vue';
	export default {
		props: [],
		data() {
			return {
				children: null,
			}
		},
		computed: {

		},
		methods: {
			//主菜单是否激活
			isActive(route) {
				let currentPath = this.$route.path;
				if(route.menu) {
					if(currentPath == route.path) {
						this.children = null;
						return true;
					}
				}
				for(let i in route.children) {
					if(currentPath == route.children[i].path) {
						this.children = route.children; //获取此菜单下的子菜单
						return true;
					}
				}
				return false;
			},
			//子菜单是否激活
			isChildActive(child) {
				let currentPath = this.$route.path;
				if(currentPath == child.path) {
					return true;
				}
			},
			//退出
			logout() {
				window.sessionStorage.clear();
				this.$Message.success("退出成功"); //提示退出成功
				this.$router.push({ path: '/' })
			}
		},
		components:{
			Foot,
		},
		created() {

		}
	}
</script>

<style lang="scss" scoped>
	#menu {
		#content {			
			background: #efefef;
			.view{
				min-height:calc(100vh - 168px);
				padding: 0 30px;
			}
		}
		.childMenu {
			height: 44px;
			background: #efefef;
			padding: 0 30px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.help{
				border:1px solid #000000;
				width:70px;
				height:26px;
				text-align: center;
				line-height: 24px;
				color:#000000;
				cursor: pointer;
				transition: 0.3s;
				&:hover{
					border-color: #ffb700;
					color:#ffb700;
				}
			}
			ul {
				display: flex;
				li {
					
					line-height: 44px;
					font-weight: 600;
					cursor: pointer;
					.childName {
						color: black;
						font-size: 13px;
						padding: 0 20px;
					}
					&.active {
						border-bottom: 2px solid #ffba1e;
						color: #ffba1e;
						cursor: auto;
						.childName {
							color: #ffba1e;
						}
					}
				}
			}
		}
		header {
			display: flex;
			align-items: center;
			height: 80px;
			padding: 0 30px;
			background: #1e2223;
			.logo {
				padding-right: 30px;
				cursor: pointer;
				border-right: 1px solid #0e0e0e;
			}
			.menuList {
				flex: 1;
				margin-left: 30px;
				color: white;
				display: flex;
				>li {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 98px;
					height: 80px;
					text-align: center;
					cursor: pointer;
					a {
						color: white;
					}
					.iconfont {
						display: inline-block;
						font-size: 25px;
						margin-bottom: 2px;
					}
					&.active {
						background: #ffb700;
					}
				}
			}
			.rightMess {
				text-align: right;
				color: #fdfffe;
				.role {
					font-weight: 600;
				}
				.line {
					display: inline-block;
					transform: translateY(-1px);
					color: #98989a;
					padding: 0 10px;
				}
				.logout {
					color: #fdb900;
					cursor: pointer;
					transition: 0.5s;
					&:hover {
						font-weight: 600;
					}
				}
				.company {
					color: #989898;
					line-height: 22px;
				}
			}
		}
	}
</style>